<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <style>
        .btn1{
            background-color: rgb(121, 100, 237);
        }
        .btn2{
            background-color: cornflowerblue;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="../static/学生端.css">
    <link rel="stylesheet" href="../static/iconfont/iconfont.css">
    <title>可退选课程</title>
</head>
<body>
<div class="head">
    <div class="header">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<img width=36 height=36 src="../static/xh.png"/><img width=180 height=36 src="../static/wz.png"/>
        <a href="/student/login" class="exit"><i class="iconfont icon-tuichu"></i>退出登录</a></div>
</div>
<div class="big_box">
    <div class="wrap">
        <div class="seg"></div>
        <div class="item_title">
            <b>学生端</b>
        </div>
        <div class = "seg"></div>
        <div class="item">
            <a href="/student/mycourse"><i class="iconfont icon-yixuan"></i>&ensp;已选课程</a>
        </div>
        <div class="item">
            <a href="/student/election"><i class="iconfont icon-tianjia"></i>&ensp;选新课程</a>
        </div>
        <div class="item">
            <a href="/student/reelection"><i class="iconfont icon-shanchu"></i>&ensp;退选课程</a>
        </div>
        <div class="item">
            <a href="/student/学生个人信息"><i class="iconfont icon-gerenxinxi"></i>&ensp;个人信息</a>
        </div>
    </div>
    <div class="main">
        <div class="row">
            <h1>
                可退选课程
            </h1>
            <div class="selected">
                <form>
                    请选择年级&nbsp;
                    <select class="xq" onchange=selected() id="senior" style="color: #295287;">
                        <option disabled selected>---请选择---</option>
                        <option value="1" id="1" style="display: none">大一上学期</option>
                        <option value="2" id="2" style="display: none">大一下学期</option>
                        <option value="3" id="3" style="display: none">大二上学期</option>
                        <option value="4" id="4" style="display: none">大二下学期</option>
                        <option value="5" id="5" style="display: none">大三下学期</option>
                        <option value="6" id="6" style="display: none">大三下学期</option>
                    </select>
                    <input type="button" class="button" value="检索" onclick="search()"/>
                </form>
            </div>
            <div class="course_table" id="course_table" style="display: none;">
                <table class="table" id="tt">
                    <thead>
                    <tr>
                        <th>课程号</th>
                        <th>课程名</th>
                        <th>课程时长</th>
                        <th>课程学分</th>
                        <th>上课时间</th>
                        <th>上课地点</th>
                        <th>可选人数</th>
                        <th>课程类别</th>
                        <th>授课教师</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <div class="modal" id="myModal" style="display: none;">
        <div class="modal-dialog">
            <form class="modal-content"id="Form" role="form">
                <div class="modal-header">
                </div>
                <div class="modal-body">
                    <h4 class="modal-title">确定退选<input disabled="true" type="text" id="course_name" class="input" th:value="11" />这门课吗？</h4>
                    <input type="hidden" id="course_id" class="input" th:value="11" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn_default" data-dismiss="modal" onclick="Default()">取消</button>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                    <button type="button" class="btn_primary" onclick="Sure()">确定</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    //网站自加载
    $(function () {
        aaa();
    })
    //对学生的年级进行检索，并将学生对应的年级进行显示
    function aaa() {

        $.ajax({
            type:"post",
            url:"/student/year",
            data:{},
            dataType: "text",
            success:function(dat)
            {
                document.getElementById(dat).style.display="block";
            }
        })
    }
    //弹框里面的内容
    //取消按键
    function  Default() {
        document.getElementById("myModal").style.display="none";
    }
    //确认按键
    function  Sure() {
        document.getElementById("myModal").style.display="none";
        var G = $('#course_name').val();
        var id = $('#course_id').val();
        $.ajax({
            url:"/student/tuike",
            type:"post",
            data:{"courseid":id},
            success: function (dat){
                alert("已成功退选课程 "+G);
                search();
            }
        })
    }
    //列表中的退选按键
     function chakan(self) {
        document.getElementById("myModal").style.display="block";
        var G = $(self).attr("value");
        var id = $(self).attr("id");
        //将弹窗中的“确定退选课程名"换成行对应的名字
        document.getElementById("course_name").value=G;
        document.getElementById("course_id").value=id;
    }

    function search(){
        document.getElementById("course_table").style.display="block";
        var select = document.getElementById("senior");
        var term = select.value;
        $.ajax({
            url: "/student/ireelection",
            type: "post",
            dataType:"json",
            data:{"term":term},
            success: function (dat) {
                var str="";
                var list = dat.infoList;
                $.each(list, function (index, course) {
                    var stra = '<tr><td>' + course.courseid +
                        '</td><td>' + course.coursename +
                        '</td><td>' + course.coursetime +
                        '</td><td>' + course.coursescore +
                        '</td><td>' + course.time +
                        '</td><td>' + course.site +
                        '</td><td>' + course.number +
                        '</td><td>' + course.classify +
                        '</td><td>' + course.teacher +
                        '</td><td><button type="button" class="btn btn1" id="' + course.courseid + '" name="chakan" value="' + course.coursename + '" onclick="chakan(this)">退选</button> '+
                        '</td></tr>';
                    str = str + stra;
                })
                $("#tt tr:gt(0)").remove();
                $("#tt").append(str);
            }
        })
    }

</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script>window.jp || document.write('<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.24/assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.24/dist/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.24/assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.24/assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>